<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
    String path = request.getContextPath();
    String basePath = 
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html >
<html>
<head>

<link rel="shortcut icon" href="<%=basePath%>rs/assets/img/favicon.png">
<!-- bootstrap & fontawesome -->
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/bootstrap.min.css" />
	<style>
	.ruledetail{
		display: inline-block;
	    background-color: #6fb3e0;
	    padding: 5px 22px;
	    color: #fff;
	    vertical-align: middle;
	    border: 4px solid #6fb3e0;
	}
	.ruledetail:hover{
		background-color:#4f99c6;
		color:#fff;
		text-decoration:none; 
	}
	
	    
	</style>
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="<%=basePath%>rs/assets/css/colorbox.css" />
<!-- text fonts -->
<link rel="stylesheet" href="<%=basePath%>rs/assets/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="<%=basePath%>rs/assets/css/ace.min.css"
	id="main-ace-style" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="<%=basePath%>rs/assets/css/ace-part2.min.css"/>
    <![endif]-->
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="<%=basePath%>rs/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="<%=basePath%>rs/assets/css/chosen.css" />
<link rel="stylesheet" href="<%=basePath%>rs/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/daterangepicker.css" />
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/bootstrap-table.css" />
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/bootstrap-treeview.css" />
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/ace.onpage-help.css" />
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/css/jquery.shCircleLoader.css" />
<link rel="stylesheet"
	href="<%=basePath%>rs/assets/js/umeditor/themes/default/css/umeditor.css" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="<%=basePath%>rs/assets/css/ace-ie.min.css"/>
    <![endif]-->

<!--[if lt IE 9]>
    <script src="<%=basePath%>rs/assets/js/html5shiv.js"></script>
    <script src="<%=basePath%>rs/assets/js/respond.min.js"></script>
   <!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=basePath%>rs/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=basePath%>rs/assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='<%=basePath%>rs/assets/js/jquery.mobile.custom.min.js'>"
            + "<" + "/script>");
</script>
<script src="<%=basePath%>rs/assets/js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->
<script src="<%=basePath%>rs/assets/js/jquery.form.js"></script>
<!--[if lte IE 8]>
<script src="<%=basePath%>rs/assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="<%=basePath%>rs/assets/js/jquery-ui.custom.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.sparkline.min.js"></script>
<script src="<%=basePath%>rs/assets/js/flot/jquery.flot.min.js"></script>
<script src="<%=basePath%>rs/assets/js/flot/jquery.flot.pie.min.js"></script>
<script src="<%=basePath%>rs/assets/js/flot/jquery.flot.resize.min.js"></script>

<!-- ace scripts -->
<script src="<%=basePath%>rs/assets/js/ace.min.js"></script>
<script src="<%=basePath%>rs/assets/js/ace-elements.min.js"></script>
<script src="<%=basePath%>rs/assets/js/bootstrap-treeview.js"></script>
<script src="<%=basePath%>rs/assets/js/fuelux/fuelux.spinner.min.js"></script>


<script src="<%=basePath%>rs/assets/js/chosen.jquery.min.js"></script>
<script src="<%=basePath%>rs/assets/js/fuelux/fuelux.spinner.min.js"></script>
<script
	src="<%=basePath%>rs/assets/js/date-time/bootstrap-datepicker.js"></script>
<script
	src="<%=basePath%>rs/assets/js/date-time/bootstrap-timepicker.min.js"></script>
<script src="<%=basePath%>rs/assets/js/date-time/moment.min.js"></script>
<script src="<%=basePath%>rs/assets/js/date-time/daterangepicker.min.js"></script>
<script
	src="<%=basePath%>rs/assets/js/date-time/bootstrap-datetimepicker.min.js"></script>
<script src="<%=basePath%>rs/assets/js/bootstrap-colorpicker.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.knob.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.autosize.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.maskedinput.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.messager.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.dialog.js"></script>
<script src="<%=basePath%>rs/assets/js/bootstrap-tag.min.js"></script>
<script src="<%=basePath%>rs/assets/js/typeahead.jquery.min.js"></script>

<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script src="<%=basePath%>rs/assets/js/ace/elements.onpage-help.js"></script>
<script src="<%=basePath%>rs/assets/js/ace/ace.onpage-help.js"></script>

<script src="<%=basePath%>rs/assets/js/jquery.dataTables.min.js"></script>

<script src="<%=basePath%>rs/assets/js/jquery.dataTables.bootstrap.js"></script>
<script src="<%=basePath%>rs/assets/js/bootstrap-table.min.js"></script>
<%-- <script src="<%=basePath%>rs/assets/js/bootstrap-table.js"></script> --%>

<script src="<%=basePath%>rs/assets/js/fuelux/fuelux.wizard.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.colorbox-min.js"></script>
<script src="<%=basePath%>rs/assets/js/ace/elements.onpage-help.js"></script>



<script src="<%=basePath%>rs/assets/js/bootstrap-wysiwyg.min.js"></script>
<script src="<%=basePath%>rs/assets/js/jquery.hotkeys.min.js"></script>

<script src="<%=basePath%>rs/assets/js/jquery.shCircleLoader-min.js"></script>

<script src="<%=basePath%>rs/assets/js/javascriptCheck.js"></script>

</head>
<body>
	<div class="main-content" >

		<!-- /section:basics/content.breadcrumbs -->
		<div class="row">
			<div class="col-md-12">
				<h3 class="header smaller lighter blue">
					配置管理列表
					<span id="addName"
						style="float: right;margin: 4px 26px 0 0;font-size: 14px;color: #478FCA;font-family: initial;">欢迎
						<span></span><a href="<%=basePath%>qrsms/cancel"
							; style="color: #478FCA;margin-left: 16px;cursor: pointer;text-decoration: blink;">注销</a>
					</span>
				</h3>
				<div class="widget-box">
					<div class="widget-header widget-header-small">
						<h5 class="widget-title lighter">操作</h5>
						<div class="widget-toolbar">
							<a href="#" data-action="collapse"> <i
								class="ace-icon fa fa-chevron-up"></i>
							</a>
						</div>
					</div>

					<div class="widget-body">
						<div class="widget-main">
							<div class="row">
							<div class="col-md-4">
									<label class="">请输入规则 ： </label> <input type="text"
										class="form-control " id="QR_ID" name="QR_ID"
										placeholder="请输入内容" style="display: inline-block; width: 50%;">
								</div>
								<div class="col-md-4">
									<label class="">请输入备注 ： </label> <input type="text"
										class="form-control " id="QR_CONTENT" name="QR_CONTENT"
										placeholder="请输入内容" style="display: inline-block; width: 50%;">
								</div>
								
								<div class="col-md-4">
									<div class="input-group">
										<span class="">
											<button type="button" id="search"
												class="btn btn-purple btn-sm">
												查询 <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
											</button>&nbsp;&nbsp;&nbsp;
											<button id="addBtn" type="button" class="btn btn-sm btn-info">
												新增 <i class="ace-icon fa fa-plus icon-on-right bigger-110"></i>
											</button>&nbsp;&nbsp;&nbsp;
											<a href="<%=basePath%>show/ShowRuleDateils" class="ruledetail">详情</a>
											&nbsp;&nbsp;&nbsp;
											<a href="<%=basePath%>qrsms/uploadtask" class="ruledetail">返回</a>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="table-header" style="margin-top: 20px;">&nbsp;</div>
				<table id="tableInfo"></table>
			</div>
		</div>
		<div class="page-content">
			<div class="page-content-area"></div>
			<!-- /.page-content-area -->
		</div>
		<!-- /.page-content -->
		<div></div>
	</div>
	<!-- /.main-content -->
	<script type="text/javascript">
function operateFormatter(value, row, index) { 
	return [
	        '<a class="edit margin-left-20" href="javascript:void(0)" title="Edit" id="detailBtn">',
	            '<i class="glyphicon glyphicon-edit"></i> 修改',
	        '</a>&nbsp&nbsp',	        
	        '<a class="edit margin-left-20" href="javascript:void(0)" title="Delete" id="deleteBtn">',
	            '<i class="glyphicon glyphicon-edit"></i> 删除',
	        '</a>'
	    ].join('');
    
}


window.operateEvents = {
        'click #detailBtn': function (e, value, row, index) {
        	var QR_ID = row.QR_ID;
        	var QR_CONTENT = row.QR_CONTENT;
        	var QR_FLAG = row.QR_FLAG;
        	/* var RIGHTURL= row.RIGHTURL;
        	var ID = row.ID; */
        	$('#updateMenu').find("input[name='QR_ID']").val(QR_ID);
        	$('#updateMenu').find("input[name='QR_CONTENT']").val(QR_CONTENT);
			$('#updateMenu').find("input[name='QR_FLAG']").val(QR_FLAG);
			/* $('#updateMenu').find("input[name='ERRURL']").val(ERRURL);
			$('#updateMenu').find("input[name='RIGHTURL']").val(RIGHTURL); */
    		$('#updateMenu').modal('show');
        },
        'click #deleteBtn': function (e, value, row, index) {
        	var QR_ID = row.QR_ID;
			$.messager.confirm("提示", "是否确认删除", function() {
			
				deleteRow(QR_ID);
			 });
        }
    };

function queryParams(params) {

	var param={
			QR_CONTENT:$("#QR_CONTENT").val(),
			QR_ID:$("#QR_ID").val(),
			offset: params.offset,
			limit: params.limit
	};
	  return param;
}

function doSearch(){
    	
    		var url = "<%=basePath%>show/serchruls";
    		
            $('#tableInfo').bootstrapTable({
                method: 'get',
                url: url,
		        cache: false,
		        height: 450,
		        striped: true,
		        pagination: true,
		        sidePagination: 'server',
		        queryParams: queryParams,
		        pageNumber: 1,
		        pageSize: 10,
		        pageList: [10, 20],
                columns: [{
                    field: 'QR_ID',
                    title: '规则',
                    align: 'center',
                    valign: 'middle'
                },{
                    field: 'QR_CONTENT',
                    title: '备注',
                    align: 'center',
                    valign: 'middle'
                }, {
	                field: 'QR_FLAG',
	                title: '状态',
	                align: 'center',
	                valign: 'middle'
	            }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter: operateFormatter,
                    events: operateEvents
                }]
            });
    }


	$(function() { 
		
		$(window).resize(function () {$('#tableInfo').bootstrapTable('resetView'); });
		doSearch();
		$("#search").click(function(){
			$('#tableInfo').bootstrapTable("refresh",{url:"<%=basePath%>show/serchruls"});
		});
			$("#addBtn").click(function(){
			$('#USERNAME1').val("");
			$('#updateMenu').find("input[name='QR_ID']").val('');
        	$('#updateMenu').find("input[name='QR_CONTENT']").val('');
			$('#updateMenu').find("input[name='QR_FLAG']").val('');
			$("#addMenu").modal('show');
		});
		
	});

	
	
	function deleteRow(QR_ID){
		
		$.ajax({    
            type:'post',        
            url:'<%=basePath%>show/deleterule',    
            data:{"QR_ID":QR_ID},    
            cache:false,    
            dataType:'json',    
            success:function(data){
            	if(data.code=='success'){
            		$.messager.alert("提示", "删除成功")
            		$('#tableInfo').bootstrapTable("refresh",{url:"<%=basePath%>show/serchruls"});
            	}
            }    
        });
	}

	function submitForm(){
		/* if($("#USERNO1").val()==null||$("#USERNO1").val()==''){
			$.messager.alert("提示", "规则不能为空！")
			return;
		} */
		if($("#USERNAME1").val()==null||$("#USERNAME1").val()==''){
			$.messager.alert("提示", "备注不能为空！")
			return;
		}
		if($("#USERNAME1").val().length > 50){
			$.messager.alert("提示", "长度过长，字符限制为50个字符！")
			return;
		}
		
		/* if($("#ERRURL1").val()==null||$("#ERRURL1").val()==''){
			$.messager.alert("提示", "错误跳转链接不能为空！")
			return;
		}
		if($("#RIGHTURL1").val()==null||$("#RIGHTURL1").val()==''){
			$.messager.alert("提示", "正确跳转链接不能为空！")
			return;
		} */
	
		$.ajax({    
            type:'post',        
            url:'<%=basePath%>show/insertrule',    
            data:$('#addMenuForm').serialize(),
            cache:false,    
            dataType:'json',    
            success:function(data){
            	if(data.code=='success'){
            		$.messager.alert("提示", "添加成功！");
            		$("#addMenu").modal('hide');
            		$('#tableInfo').bootstrapTable("refresh",{url:"<%=basePath%>show/serchruls"});
            	}
            }    
        });
	}
	
	function updatesubmitForm(){
		if($("#USERNAME2").val()==null||$("#USERNAME2").val()==''){
			$.messager.alert("提示", "备注不能为空！")
			return;
		}
		if($("#ERRURL2").val()==null||$("#ERRURL2").val()==''){
			$.messager.alert("提示", "状态不能为空！")
			return;
		}
		if($("#USERNAME2").val().length > 50){
			$.messager.alert("提示", "长度过长，字符限制为50个字符！")
			return;
		}
		$.ajax({    
            type:'post',        
            url:'<%=basePath%>show/updaterule',    
            data:$('#updateMenuForm').serialize(),
            cache:false,    
            dataType:'json',    
            success:function(data){
            	if(data.code=='success'){
            		$.messager.alert("提示", "修改成功！");
            		$("#updateMenu").modal('hide');
            		$('#tableInfo').bootstrapTable("refresh",{url:"<%=basePath%>show/serchruls"
						});
					}
				}
			});
		}
		//获取cookie
		$(function(){
			$.ajax({    
		            type:'post',        
		           	url:'<%=basePath%>qrsms/cookiers',
		            cache:false,    
		            dataType:'json',    
		            success:function(data){
			            $('#addName span').text(data);
		            }    
		        });
		});
	</script>



	<div class="row">
		<!-- add -->
		<div class="modal fade" id="addMenu" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" id="close1"
							data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">新增客户</h4>
					</div>
			
					<div class="modal-body">
						<form role="form" action="" method="post" id="addMenuForm">
							
							<div class="form-group">
								<label>规则备注 ：</label> <input class="form-control"
									name="QR_CONTENT" type="text" id="USERNAME1">
							</div>
							
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-info" type="button" id="addBtn"
							onclick="submitForm();">
							<i class="ace-icon fa fa-check bigger-110"></i> 增加
						</button>
						&nbsp; &nbsp; &nbsp;
						<button class="btn" type="button" id="close3"
							class="btn btn-default" data-dismiss="modal">
							<i class="ace-icon fa fa-undo bigger-110"></i> 关闭
						</button>
					</div>
					<div class="modal-body" id="addMsg" style="color: red;"></div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</div>
	<div class="row">
		<!-- update -->
		<div class="modal fade" id="updateMenu" id="close2" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true" id="close2">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改规则</h4>
					</div>
					<div class="modal-body">
						<form role="form" action="" method="post" id="updateMenuForm">
							<input class="form-control" name="QR_ID" type="text" id="ID2"
								style="display:none">
							<!-- <div class="form-group">
							<label>规则 ：</label> 
							<input class="form-control"  name="QR_ID" type="text" id="USERNO2" maxlength="40">
						</div> -->
							<div class="form-group">
								<label>备注 ：</label> <input class="form-control"
									name="QR_CONTENT" type="text" id="USERNAME2" >
							</div> 
							<div class="form-group">
								<label>状态 ：</label> <input class="form-control" name="QR_FLAG"
									type="text" id="ERRURL2" maxlength="1 ">
							</div>
							<!-- <div class="form-group">
							<label>正确跳转URL ：</label> 
							<input class="form-control"  name="RIGHTURL" type="text" id="RIGHTURL2" maxlength="100" placeholder="网址需以http://或https://开头">
						</div> -->
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-info" type="button" id="addBtn"
							onclick="updatesubmitForm();">
							<i class="ace-icon fa fa-check bigger-110"></i> 修改
						</button>
						&nbsp; &nbsp; &nbsp;
						<button class="btn" type="button" id="close4"
							class="btn btn-default" data-dismiss="modal">
							<i class="ace-icon fa fa-undo bigger-110"></i> 关闭
						</button>
					</div>
					<div class="modal-body" id="updateaddMsg" style="color: red;"></div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</div>
</body>
</html>